<template>
	<view class="centerOneself">
		<view class="centerOneself-main">
			<view class="centerOneself-li">
				<view class="centerOneself-list-left">
					昵称
				</view>
				<view class="centerOneself-list-right">
					<view class="centerOneself-list-right-txt">
						<!-- <open-data type="userNickName"></open-data> -->
						<text>{{nickname}}</text>
					</view>
					<view class="centerOneself-list-right-img">
						<!-- <image class="centerOneself-list-right-img-right" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image> -->
					</view>
				</view>
			</view>
			<view class="centerOneself-li">
				<view class="centerOneself-list-left">
					头像
				</view>
				<view class="centerOneself-list-right">
					<view class="centerOneself-list-right-headimg">
						<!-- <open-data class="centerOneself-list-headimg" type="userAvatarUrl"></open-data> -->
						<image @click="cli_headImg" class="centerOneself-list-headimg" :src=nickImg mode=""></image>
					</view>
					<view class="centerOneself-list-right-img">
						<!-- <image class="centerOneself-list-right-img-right" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image> -->
					</view>
				</view>
			</view>
			<!--  @click="cli_changePhone" -->
			<view class="centerOneself-li">
				<view class="centerOneself-list-left">
					绑定手机号
				</view>
				<view class="centerOneself-list-right">
					<view class="centerOneself-list-right-txt">
						{{phone}}
					</view>
					<view class="centerOneself-list-right-img">
						<!-- <image class="centerOneself-list-right-img-right" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image> -->
					</view>
				</view>
			</view>
			<view class="centerOneself-li" @click="cli_changePsaaword">
				<view class="centerOneself-list-left">
					修改密码
				</view>
				<view class="centerOneself-list-right">
					<view class="centerOneself-list-right-headimg">

					</view>
					<view class="centerOneself-list-right-img">
						<image class="centerOneself-list-right-img-right" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png"
							mode=""></image>
					</view>
				</view>
			</view>
			<view class="centerOneself-li" @click="cli_goAddressList">
				<view class="centerOneself-list-left">
					我的地址
				</view>
				<view class="centerOneself-list-right">
					<view class="centerOneself-list-right-headimg">

					</view>
					<view class="centerOneself-list-right-img">
						<image class="centerOneself-list-right-img-right" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png"
							mode=""></image>
					</view>
				</view>
			</view>
			<view class="centerOneself-li" @click="cli_yhxy">
				<view class="centerOneself-list-left">
					用户协议
				</view>
				<view class="centerOneself-list-right">
					<view class="centerOneself-list-right-headimg">

					</view>
					<view class="centerOneself-list-right-img">
						<image class="centerOneself-list-right-img-right" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png"
							mode=""></image>
					</view>
				</view>
			</view>
			<button class="centerOneself-li-lxwm" plain=true open-type="contact">
				<view class="centerOneself-li">
					<view class="centerOneself-list-left">
						联系我们
					</view>
					<view class="centerOneself-list-right">
						<view class="centerOneself-list-right-headimg">
						</view>
						<view class="centerOneself-list-right-img">
							<image class="centerOneself-list-right-img-right" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png"
								mode=""></image>
						</view>
					</view>
				</view>
			</button>
		</view>
		<view class="centerOneself-btn" @click="cli_quit">
			退出登录
		</view>
	</view>
</template>

<script>
	import allapi from '../../api/index.js'
	export default {
		data() {
			return {
				agentId: uni.getStorageSync('agentId'),
				phone: uni.getStorageSync('phone'),
				nickname: uni.getStorageSync('nickname'),
				nickImg: uni.getStorageSync('nickImg'),
			}
		},
		methods: {
			// 修改手机号
			cli_changePhone() {
				uni.navigateTo({
					url: '/pages/centerChangePhone/centerChangePhone'
				})
			},
			// 修改密码
			cli_changePsaaword() {
				uni.navigateTo({
					url: '/pages/centerChangePass/centerChangePass'
				})
			},
			// 跳转地址
			cli_goAddressList() {
				uni.navigateTo({
					url: '/pages/centerAddressList/centerAddressList'
				})
			},
			// 跳转用户协议
			cli_yhxy () {
				uni.navigateTo({
					url: '/pages/privacy/privacy'
				})
			},
			// 点击退出登录
			cli_quit() {
				uni.clearStorage();
				uni.reLaunch({
					url: '/pages/login/login'
				});
			},
			// 重新绑定头像昵称
			cli_headImg() {
				console.log(1111);
				let _that = this
				uni.getUserProfile({
					desc: '完善会员资料',
					success: (res) => {
						console.log(res);
						let dat = res.userInfo
						uni.setStorageSync('nickname',dat.nickName)
						uni.setStorageSync('nickImg',dat.avatarUrl)
						this.nickname = dat.nickName
						this.nickImg = dat.avatarUrl
						this.getLogin(dat.nickName, dat.avatarUrl)
					}
				});
			},
			getLogin (nickname, imgUrl) {
				let _that = this
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
				    console.log(loginRes);
					let code = loginRes.code
					_that.saveAgentOpenId(code, nickname, imgUrl)
				  }
				});
			},
			// 会长授权获取头像昵称 保存openId
			saveAgentOpenId (code, nickname, imgUrl) {
				uni.request({
					url: allapi.saveAgentOpenId,
					data: {
						agentId: this.agentId,
						code: code,
						nickname: nickname,
						imgUrl: imgUrl
					},
					success: (res) => {
						console.log('绑定会长成功', res);
					}
				})
			}
		}
	}
</script>

<style scoped>
	.centerOneself {}

	.centerOneself-main {
		background: #FFFFFF;
		margin-top: 16rpx;
	}

	.centerOneself-li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 32rpx;
		min-height: 96rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.centerOneself-li-lxwm {
		border: none;
		padding: 0;
	}
	.centerOneself-li:last-child {
		border: none;
	}

	.centerOneself-list-left {
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.centerOneself-list-right {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		/* background: red; */
	}

	.centerOneself-list-right-img {
		width: 32rpx;
		margin-left: 24rpx;
	}

	.centerOneself-list-right-img-right {
		width: 32rpx;
		height: 32rpx;
	}

	.centerOneself-list-right-txt {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.centerOneself-list-right-headimg {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.centerOneself-list-headimg {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
	}

	.centerOneself-btn {
		margin: 0 24rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		line-height: 96rpx;
		text-align: center;
		font-size: 28rpx;
		color: #EF691C;
		margin-top: 64rpx;
	}
</style>
